<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>货物配送系统</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.2.min.js"></script>
<style type="text/css">
table {
	margin: 0 auto;
}

#article {
	height: 450px;
	border: 1px solid #EEDC82;
}


#button {
	width: 252px;
	height: 30px;
	padding-left: 0;
	font-size: 15px;
}

th {
	width: 180px;
	height: 40px;
	background-color: #F9D16B;
	font-size: 18px;
	font-weight: normal;
}

tr {
	text-align: center;
}

[type='checkbox'] {
	width: 30px;
	height: 30px;
}

[type='button'] {
	width: 100px;
	height: 30px;
}

#button {
	width: 252px;
	height: 30px;
	padding-left: 0;
	font-size: 15px;
}
input{
text-align: center;

}

 #p{
		color: #FF6600;
		
		
	}
	#p1{
		height: 60px;
		background-image:url("${pageContext.request.contextPath }/Images/borrow_if.gif");
		background-repeat: no-repeat;
	}

</style>
</head>
<body style="font-size:20px">
	<%@ include file="navigation.jsp"%>
	
	<div id="article">
	 <p id="p"> 当前位置：系统设置 > 书架设置>>></p>	
	   <div id="d1">
	       <p id="p1"></p>
		 <table >
			<tr>
				<th>序号</th>
				<th width="25%">书架名称</th>
				<th width="25%">修改</th>
				<th width="25%">删除</th>
			</tr>
			<c:forEach items="${list}" var="c" varStatus="index">
				<tr>
					<td><input type="hidden" value="${c.id }">${index.index+1 }</td>
					<td>${c.name }</td>
					<td><input type="button" value="修改" class="mod"></td>
					<td><input value="删除" class="del" type="button"></td>
				</tr>
			</c:forEach>
		</table>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			$(".mod")
					.click(	function() {
								var f = $($(this).parent().siblings()[1]);
								var $id = $($(this).parent().siblings()[0]);
								var id = $id.find("input")[0].value;
								if (this.value == "修改") {f.html("<input value='"+ f.text()+ "'>");
									this.value = "保存";
								} else {
									val = f.find("input")[0].value;
									f.html("");
									f.text(val);
									/* 提交请求 */
									putAJAX(this,val,id);
									this.value = "修改";
								}
							});
			
			
			/* 删除JS */
			$(".del").click(function(){
				var $id = $($(this).parent().siblings()[0]);
				var id = $id.find("input")[0].value;

				$.post("delectById.do",{
					"id":id
				}
				,function(){
					alert("删除成功！");
					location.reload();
				}
				);
				
				
			});
		
		});
		
		

		function putAJAX(t, val, id) {
			console.log("id:" + id);
			$.post("update.do", {
				id : id,
				name : val

			}, function() {
				alert("修改成功");
			});
		}
	</script>
</body>
</html>


